<template>
  <div class="EvaluateModal">
    <el-dialog :close-on-click-modal="false" title="实名认证" :visible.sync="visible" width="40%" :before-close="handleClose">
      <el-form 
        ref="authenForm" 
        :model="form" 
        :rules="rules" 
        status-icon 
        @keyup.enter.native="handleAuthen"
      >
          <el-form-item prop="user_realName" label="真实姓名">
            <el-input v-model="form.user_realName" />
          </el-form-item>
          <el-form-item prop="user_idNumber" label="身份证号">
            <el-input v-model="form.user_idNumber" />
          </el-form-item>
          <el-form-item prop="user_bankCard" label="银行卡号">
            <el-input v-model="form.user_bankCard" />
          </el-form-item>
      </el-form>
      <template #footer>
        <div class="buttons">
          <el-button type="primary" @click="handleAuthen">确 定</el-button>
          <el-button plain @click="handleClose">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex';
export default {
  name: '',
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
  },
  computed:{
    ...mapState({
      userInfo: state => state.user.userInfo,
    })
  },
  data () {
    let checkIdNumber = (rule, value ,callback) => {
      let idReg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
      if(!idReg.test(value)){
        return callback(new Error('身份证号码格式错误。'));
      }else{
          callback();
      }
    };
    let checkChinese = (rule, value ,callback) => {
      let nameReg = /([a-zA-Z]|[\u4e00-\u9fa5]){1,}/g;
      if(!nameReg.test(value)){
        return callback(new Error('请输入汉字'));
      }else{
          callback();
      }
    }
    let checkbankNum = (rule, value ,callback) => {
      let nameReg = /^([1-9]{1})(\d{15}|\d{18})$/;
      if(!nameReg.test(value)){
        return callback(new Error('银行卡号格式不正确'));
      }else{
          callback();
      }
    }
    return {
      form: {
        user_realName: '',
        user_idNumber: '',
        user_bankCard: '',
      },
      rules: {
        //数组里一个对象对应套规则(包括检验内容,提示语)
        user_realName: [
          { required: true, message: '请输入您的姓名', trigger: 'change' },
          { validator: checkChinese , trigger: 'change' },
          { min: 2, message: '姓名长度应该大于2小于7', trigger: 'change' },
          { max: 6, message: '姓名长度应该大于2小于7', trigger: 'change' },
        ],
        user_idNumber: [
          { required: true, message: '请输入您的身份证号', trigger: 'change' },
          { validator: checkIdNumber , trigger: 'change' }
        ],
        user_bankCard: [
          { required: true, message: '请输入银行卡号', trigger: 'change' },
          { validator: checkbankNum , trigger: 'change' }
        ],
      },
    };
  },
  methods: {
    ...mapActions({
      fetchDoReal: 'user/fetchDoReal'
    }),
    clear(){
      Object.keys(this.form).forEach(key => {
        this.form[key] = '';
      })
    },
    handleAuthen(){
      this.$refs.authenForm.validate((valid) => {
        if(valid){
          this.fetchDoReal({ user_id: this.userInfo.user_id, ...this.form });
          this.handleClose();
        }else{
          return false;
        }
      })
    },
    handleClose () {
      this.$emit('close');
      this.clear();
    },
  },
  watch:{
  }
}
</script>
<style lang='scss' scoped >
.el-form{
  @include marginCenter(70%)
}
</style>